<template>
    <div>
        <Row>
            <Form :model="selectObj" inline>
                <FormItem>
                    <DatePicker type="datetimerange" placeholder="请选择日期和时间" @on-change='datePicker' style="width: 300px"></DatePicker>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="search">搜索</Button>
                </FormItem>
                <FormItem>
                    <Button type="error" @click="delSelect">批量删除</Button>
                </FormItem>
            </Form>
        </Row>
        <Row>
            <Col>
                <Table border :columns="columns" :loading="tableLoading" :data="dataList" @on-selection-change="tableSelectChange">
                    <template slot-scope="{ row, index }" slot="action">
                        <!--<Button type="info" size="small" class="actionBtn" @click="info(row, index)">详情</Button>-->
                        <!--<Button type="primary" size="small" class="actionBtn" @click="edit(row, index)">编辑</Button>-->
                        <Button type="error" size="small" class="actionBtn" @click="remove(row, index)">删除</Button>
                    </template>
                </Table>
            </Col>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-total :current="pageObj.page" :page-size="pageObj.pageSize" :total="pageObj.totalRecord" @on-change="getPageNo"/>
        </Row>
        <!--<Modal
                v-model="modal"
                :title="title"
                @on-ok="modalOk"
                :loading="btnLoading">
            <Form :label-width="130" ref="formItem" :model="formItem">
                <template v-if="modalState === 'edit'">
                    <FormItem label="街道：">
                        <Input v-model="formItem.street" class="input"></Input>
                    </FormItem>
                </template>
                <template v-if="modalState === 'reject'">
                    <FormItem label="驳回原因：">
                        <Input type="textarea" :autosize="{minRows: 3}" v-model="formItem.reject_reason"
                               class="input"></Input>
                    </FormItem>
                </template>
            </Form>
        </Modal>-->
    </div>
</template>

<script>
import {
  getDataTableListPage,
  deleteDataTable,
  deleteAllDataTable
} from '@/api/manager'
import columnsData from './columnsData'
export default {
  name: 'dataList',
  props: {
    type: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      selectObj: {},
      pageObj: {
        page: 1,
        pageSize: 10,
        totalRecord: 1,
        type: this.type
      },
      title: '',
      modalState: '',
      formItem: {},
      modal: false,
      btnLoading: true,
      tableLoading: false,
      columns: [],
      dataList: [],
      selectList: []
    }
  },
  mounted () {
    // console.log('传入类型', this.type)
    this.initColumns()
    this.initData(this.pageObj)
  },
  methods: {
    initColumns () {
      switch (this.type) {
        case 'zjsj_gcxm_zj':
          this.columns = columnsData.zjsj_gcxm_zj
          break
        case 'zjsj_dwbt_zj':
          this.columns = columnsData.zjsj_dwbt_zj
          break
        case 'zjsj_dwbt_zjmx':
          this.columns = columnsData.zjsj_dwbt_zjmx
          break
        case 'xmsj_xmjb':
          this.columns = columnsData.xmsj_xmjb
          break
        case 'wzsj_gyfc':
          this.columns = columnsData.wzsj_gyfc
          break
        case 'wzsj_gwyc_cl':
          this.columns = columnsData.wzsj_gwyc_cl
          break
        case 'qlsj_zggcd_dyx':
          this.columns = columnsData.qlsj_zggcd_dyx
          break
        case 'qlsj_jcdx':
          this.columns = columnsData.qlsj_jcdx
          break
        case 'qlsj_bmqz':
          this.columns = columnsData.qlsj_bmqz
          break
      }
    },
    initData (data) {
      this.tableLoading = true
      getDataTableListPage(data).then(ret => {
        let data = ret.data
        if (data.errcode === 1001) {
          this.tableLoading = false
          this.dataList = data.data.data
          this.pageObj.totalRecord = data.data.total
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    initpage () {
      this.pageObj.page = 1
      this.pageObj.pageSize = 10
    },
    datePicker (val) {
      this.selectObj.time = val
    },
    search () {
      this.initpage()
      const data = {
        ...this.pageObj,
        start_time: this.selectObj.time ? this.selectObj.time[0] : '',
        end_time: this.selectObj.time ? this.selectObj.time[1] : ''
      }
      this.initData(data)
    },
    tableSelectChange (val) {
      this.selectList = val
    },
    delSelect () {
      if (this.selectList.length <= 0) {
        this.$Message.error('请选择要删除的数据')
        return false
      }
      let ids = []
      this.selectList.forEach((item) => {
        ids.push(item.id)
      })
      this.$Modal.confirm({
        title: '确认删除选中信息吗？',
        content: '删除后不可恢复，请确认后再操作！',
        loading: true,
        onOk: () => {
          deleteAllDataTable({ ids: JSON.stringify(ids), type: this.type }).then(ret => {
            let data = ret.data
            if (data.errcode === 1001) {
              this.$Modal.remove()
              this.success()
              this.initData(this.pageObj)
            } else {
              this.$Modal.remove()
              this.error(data)
            }
          })
        }
      })
    },
    info (row, index) {
    },
    edit (row, index) {
      this.formItem = {}
      this.title = '编辑'
      this.modalState = 'edit'
      this.formItem = JSON.parse(JSON.stringify(row))
      this.modal = true
    },
    remove (row) {
      this.$Modal.confirm({
        title: '确认删除此项信息吗？',
        content: '删除后不可恢复，请确认后再操作！',
        loading: true,
        onOk: () => {
          deleteDataTable({ id: row.id, type: this.type }).then(ret => {
            let data = ret.data
            if (data.errcode === 1001) {
              this.$Modal.remove()
              this.success()
              this.initData(this.pageObj)
            } else {
              this.$Modal.remove()
              this.error(data)
            }
          })
        }
      })
    },
    modalOk () {
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPageNo (pageNo) {
      this.pageObj.page = pageNo
      const data = {
        ...this.pageObj,
        start_time: this.selectObj.time ? this.selectObj.time[0] : '',
        end_time: this.selectObj.time ? this.selectObj.time[1] : ''
      }
      this.initData(data)
    }
  }
}
</script>

<style scoped>
    .actionBtn {
        margin-right: 5px;
        margin-bottom: 5px;
        width: 70px;
    }

    .input {
        width: 280px;
    }
</style>
